<template>
  <div class="container home">
    <div class="box">
      <el-row :gutter="15">
        <el-col :span="24">
          <el-col :span="6">
            <div class="item bgff" :style="{ backgroundColor: coloritem[0] }">
              <div class="t">工单总量</div>
              <div class="num">
                <div class="num1">{{ totalNum }}</div>
                <!--  -->
                <div>
                  <div></div>
                  <span class="iconfont icon-rijungongzuoliang"></span>
                </div>
              </div>

              <div class="desc">
                已完成工单量
                <span>{{ completeNum }}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="item bgff" :style="{ backgroundColor: coloritem[1] }">
              <div class="t">平均处理时长</div>
              <div class="num">
                <div class="num1">
                  {{ durationHour }}<span class="duration">小时</span
                  >{{ durationMinute }}<span class="duration">分</span>
                </div>
                <!-- <span>小时</span> -->
                <div>
                  <div></div>
                  <span class="iconfont icon-pingjunchulishichang"></span>
                </div>
              </div>

              <div class="desc">
                <div class="num1">
                  <span class="week">近一周</span>
                  <span>
                    {{ durationHourNearlyWeek }}小时
                    {{ durationMinuteNearlyWeek }}分</span
                  >
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="item bgff" :style="{ backgroundColor: coloritem[2] }">
              <div class="t">告警总数</div>
              <div class="num">
                <div class="num1">{{ alarmCount }}</div>

                <div>
                  <div></div>
                  <span class="iconfont icon-gaojingzongshu"></span>
                </div>
              </div>

              <div class="desc">
                近一周的日均告警数
                <span>{{ dayAlarmCount }}</span>
              </div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="item bgff" :style="{ backgroundColor: coloritem[3] }">
              <div class="t">已处理告警</div>
              <div class="num">
                <div class="num1">{{ alarmProcessCount }}</div>

                <div>
                  <div></div>
                  <span class="iconfont icon-yichuligaojingshu"></span>
                </div>
              </div>

              <div class="desc">
                处理率
                <span>{{ completionRate }}</span>
              </div>
            </div>
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-col :span="18">
            <div class="item-1 bgff">
              <title-chart
                title="告警趋势"
                type="chart-line"
                :dataset="dataset"
              >
                <router-link
                  v-if="jump.jumpAlarmMore"
                  to="/alarmCenter/index"
                  slot="header"
                >
                  <span>更多</span>
                </router-link>
              </title-chart>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="item-1 bgff">
              <title-card title="快捷入口">
                <div class="list" slot="content">
                  <el-col :span="8" v-for="item in quickEntranceVoList">
                    <div class="link" @click="quickEntranceClick(item)">
                      <div
                        class="quick-icon-wrap"
                        :style="{ backgroundColor: item.color }"
                      >
                        <i :class="item.icon"></i>
                      </div>
                      <div class="quick-name">{{ item.name }}</div>
                    </div>
                  </el-col>
                </div>
              </title-card>
            </div>
          </el-col>
        </el-col>
        <el-col :span="24">
          <el-col :span="24">
            <div class="item-1 bgff" style="height: 300px">
              <div class="title">
                我的待办
                <span v-if="jump.jumpWorkMore" @click="goRouterLink">更多</span>
                <!--              <router-link :to="workFlowTodoPath">
                              <span>更多</span>
                            </router-link>-->
              </div>
              <!--列表 start-->
              <common-table
                height="300"
                style="width: 100%"
                v-loading="dbLoading"
                :data="dbList"
              >
                <el-table-column label="流程名称" align="left" prop="modelName">
                  <template slot-scope="{ row }">{{ row.modelName }}</template>
                </el-table-column>

                <el-table-column label="流程编码" align="left" prop="modelKey">
                  <template slot-scope="{ row }">{{ row.modelKey }}</template>
                </el-table-column>

                <el-table-column
                  label="业务标题"
                  align="left"
                  prop="instanceName"
                >
                  <template slot-scope="{ row }"
                    >{{ row.instanceName }}
                  </template>
                </el-table-column>

                <el-table-column label="发起人" align="left" prop="creator">
                  <template slot-scope="{ row }">{{ row.creator }}</template>
                </el-table-column>

                <el-table-column
                  label="开始时间"
                  align="left"
                  prop="createTime"
                >
                  <template slot-scope="{ row }">{{ row.createTime }}</template>
                </el-table-column>

                <el-table-column label="当前环节" align="left" prop="name">
                  <template slot-scope="{ row }">{{ row.name }}</template>
                </el-table-column>

                <el-table-column label="操作" align="left" width="160">
                  <template slot-scope="{ row }">
                    <el-button
                      type="text"
                      @click="goRouterLink(row.id, 'handle')"
                      >办理
                    </el-button>
                    <el-button
                      type="text"
                      @click="goRouterLink(row.id, 'entrust')"
                      >委托
                    </el-button>

                    <!-- <router-link :to="`/management/workOrder/mine?id=${row.id}&type=handle`">

                   </router-link>
                   <router-link :to="`/management/workOrder/mine?id=${row.id}&type=entrust`">
                   </router-link>-->
                  </template>
                </el-table-column>
              </common-table>
            </div>
          </el-col>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {
  home_data,
  myTaskList,
  getSummaryInfo,
  checkAuth,
} from "@/api/system/home";
import TitleChart from "@/components/EChart/TitleChart";
import { mapGetters } from "vuex";
import { updateFirstLoginToN } from "@/api/login";

export default {
  name: "",
  components: {
    TitleChart,
  },
  computed: {
    ...mapGetters(["isFirstLogin", "systemInfo"]),
    setting: {
      get() {
        return this.$store.state.settings.showSettings;
      },
      set(val) {
        this.$store.dispatch("settings/changeSetting", {
          key: "showSettings",
          value: val,
        });
      },
    },
    topNav: {
      get() {
        return this.systemInfo.topNav;
      },
    },
  },
  props: {},
  data() {
    return {
      totalNum: 0,
      durationMinute: 0,
      durationHour: 0,
      workFlowTodoPath: "",
      dbList: [],
      alarmProcessCount: 0, // 已处理告警总数
      completionRate: "", // 告警处理率
      alarmCount: 0, // 总告警量
      dayAlarmCount: 0, // 日均告警量
      alarmTrendDataVo: [], // 告警趋势数据
      quickEntranceVoList: [], // 快捷入口
      completeNum: 0,
      durationHourNearlyWeek: 0,
      durationMinuteNearlyWeek: 0,

      dataset: {
        dimensions: ["时间", "数量"],
        source: [],
      },

      // 待办
      dbLoading: false,
      chartGj: null,
      coloritem: ["#8171ff", "#15aafd", "#fb9f62", "#ff696c"],
      colorList: [
        "#d2621d",
        "#51ae43",
        "#1776ce",
        "#319ca4",
        "#763ca5",
        "#3e3ba8",
      ],
      jump: {
        jumpAlarmMore: true,
        jumpWorkMore: false,
      },
    };
  },
  // 方法
  methods: {
    getHomeData() {
      const params = {
        askType: 1,
        pageNo: 1,
        pageSize: 5,
      };
      myTaskList(params).then((res) => {
        // console.log(res)
        if (res && res.result && res.result.records) {
          this.dbList = res.result.records;
        }
      });
    },
    getAlarmData() {
      home_data({}).then((res) => {
        // console.log(res)
        if (res && res.code === 200) {
          let { alarmProcessCount, completionRate } = res.data.alarmProccessVo;
          let { alarmCount, dayAlarmCount } = res.data.alarmTotalVo;
          this.alarmProcessCount = alarmProcessCount;
          this.completionRate = completionRate;
          this.alarmCount = alarmCount;
          this.dayAlarmCount = dayAlarmCount;

          this.quickEntranceVoList = res.data.quickEntranceVoList.reduce(
            (r, c, i) => {
              let icon =
                c.icon && c.icon !== "#" ? c.icon : "iconfont icon-zonglan";
              r.push({
                ...c,
                icon,
                color: this.colorList[i % this.colorList.length],
              });
              return r;
            },
            []
          );

          this.dataset.source = res.data.alarmTrendDataVo.valueList.reduce(
            (r, c) => {
              r.push({
                时间: c.name,
                数量: c.value,
              });
              return r;
            },
            []
          ); // 告警趋势数据
        }
      });
    },
    getSummaryInfo() {
      getSummaryInfo({}).then((res) => {
        // console.log(res);
        if (res && res.code === 200 && res.result) {
          // console.log(res);
          this.totalNum = res.result.totalNum;
          this.durationHour = res.result.durationHour;
          this.durationMinute = res.result.durationMinute;
          this.workFlowTodoPath = res.result.workFlowTodoPath;
          this.completeNum = res.result.completeNum;
          this.durationHourNearlyWeek = res.result.durationHourNearlyWeek;
          this.durationMinuteNearlyWeek = res.result.durationMinuteNearlyWeek;
        }
      });
    },
    quickEntranceClick(item) {
      if (item.path) this.$router.push({ path: item.path });
    },

    /**
     * 初次登录时询问是否编辑密保，更新密保状态
     */
    updateFirstLoginToN() {
      return new Promise((resolve, reject) => {
        updateFirstLoginToN({}).then((res) => {
          if (res && res.code === 200) {
            resolve();
          } else {
            reject();
          }
        });
      });
    },
    /**
     * 根据isFirstLogin判断是否第一次登陆，显示弹窗
     */
    isUpdateQuestion() {
      if (this.isFirstLogin === "Y") {
        //可以放行
        this.$confirm("初次登录是否立即编辑密保问题?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "success",
        })
          .then(() => {
            this.$router.push({
              path: "/safety/index",
              query: { type: "setQuestion" },
            });
          })
          .finally(() => {
            this.updateFirstLoginToN()
              .then()
              .finally(() => {
                this.$store.commit("SET_IS_FIRST_LOGIN", "N");
              });
          });
      }
    },

    goRouterLink(id, type) {
      if (id && type) {
        this.$router.push({
          path: "/management/workOrder/mine",
          query: {
            id,
            type,
          },
        });
      } else {
        this.$router.push({
          path: "/management/workOrder/mine",
        });
      }
    },
    getCheckAuth() {
      checkAuth().then((res) => {
        if (res && res.code === 200) {
          this.jump.jumpAlarmMore = res.data.jumpAlarmMore;
          this.jump.jumpWorkMore = res.data.jumpWorkMore;
        } else {
          this.jump.jumpAlarmMore = false;
          this.jump.jumpWorkMore = false;
        }
      });
    },
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.getHomeData();
    this.getSummaryInfo();
    this.getAlarmData(); // 告警数据接口
    this.isUpdateQuestion();
    this.getCheckAuth();
  },
};
</script>

<style lang="scss">
.home {
  overflow-y: scroll;

  .bgff {
    background: #fff;
  }

  .box {
    height: 100%;
    width: 85%;
    margin: 0 auto;

    .item {
      height: 158px;
      border: 1px solid #f0f0f0;
      border-radius: 5px;
      padding: 20px 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .num {
        width: 100%;
        font-size: 36px;
        color: #feffff;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .num1 {
          width: 70%;
          display: flex;
          justify-content: left;

          .duration {
            font-size: 14px;
            margin-top: 10px;
          }
        }
        div {
          width: 56px;
          height: 56px;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;

          div {
            width: 56px;
            height: 56px;
            opacity: 0.15;
            background: #fff;
            border-radius: 4px;
            position: absolute;
          }

          span {
            font-size: 24px;
          }
        }
      }

      .desc {
        font-size: 14px;
        font-weight: 400;
        color: #feffff;
        opacity: 0.85;
        .week {
          margin-left: 0 !important;
        }

        span {
          margin-left: 20px;
        }
      }
    }

    .item-1 {
      height: 400px;
      border: 1px solid #eee;
      margin-top: 15px;
      border-radius: 5px;
      position: relative;

      .link {
        margin-top: 20px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;

        .quick-icon-wrap {
          width: 46px;
          height: 46px;
          margin-bottom: 8px;
          border-radius: 50%;
          text-align: center;
          line-height: 46px;
          color: #fff;
          font-size: 16px;
        }

        span {
          border-radius: 100%;
          display: block;
          margin: 0 auto 10px;
          line-height: 50px;
          text-align: center;
          font-size: 40px;
        }

        .quick-name {
          margin: 0;
          font-size: 14px;
          color: #333;
          text-align: center;
        }

        p {
          margin: 0;
          font-size: 14px;
          color: #333;
        }

        &:hover {
          p {
            color: #409eff;
          }
        }
      }

      .news {
        ul {
          padding: 0;
        }

        li {
          height: auto;
          overflow: hidden;
          display: flex;
          justify-content: space-between;
          padding: 15px 20px;
          cursor: pointer;

          p {
            margin: 0;
            font-size: 15px;
            color: #333;
          }

          span {
            font-size: 14px;
            color: #999;
          }

          &:hover {
            p {
              color: #004f9c;
            }
          }
        }
      }

      .time-box {
        position: absolute;
        right: 20px;
        top: 80px;
        font-size: 14px;
        color: #999;
      }
    }

    .t {
      font-size: 14px;
      font-weight: normal;
      color: #feffff;
      display: flex;
      align-items: center;
      justify-content: space-between;

      span {
        font-size: 16px;
        color: #666;
        cursor: pointer;

        &:hover {
          color: #004f9c;
        }
      }
    }

    .title {
      font-size: 16px;
      font-weight: normal;
      color: #000;
      display: flex;
      align-items: center;
      padding: 16px 12px;
      justify-content: space-between;
      border-bottom: 1px solid #eee;

      span {
        font-size: 14px;
        color: #666;
        cursor: pointer;

        &:hover {
          color: #004f9c;
        }
      }
    }

    .chart-wrap {
      height: 336px;
    }
  }
}
</style>
